import React, { PureComponent } from 'react';
import { connect } from 'dva';
import '@ant-design/compatible/assets/index.css';
import { FormInstance } from 'antd/lib/form';
import PropTypes from 'prop-types';
import { Modal, Button, Timeline, message, Input, Table, Form, Row, Col, Select, Space, Radio, InputNumber } from 'antd';
import { getDicByKey, getDictOptionsByCode } from '@/support/common';

const FormItem = Form.Item;
const { TextArea } = Input;
const mapStateToProps = (state: any) => ({
  // loading: state.loading.effects[''],
})
class DetailModal extends PureComponent<any, any> {
  formRef = React.createRef<FormInstance>();
  static contextTypes = {
    permissions: PropTypes.array,
    dicData: PropTypes.any
  };
  constructor(props: any) {
    super(props);
  }

  componentDidUpdate(prevProps: any) {
    const { modalVisible } = this.props
    if (modalVisible && modalVisible !== prevProps.modalVisible) {
      const { sid } = this.props
      this.getBurningData(sid)
    }
  }

  //  查询自燃车辆详情
  getBurningData = (sid: string) => {
    const { dispatch } = this.props
    dispatch({
      type: 'http/getDataWithRes',
      payload: {
        url: '/battery/monitor/selfIgnition/search',
        sid,
      },
      callback: (res: any) => {
        if (res.statusCode === '0') {
          this.formRef.current && this.formRef.current.setFieldsValue({
            ...res.data,
            status: res.data?.status + '',
          })
        }
      }
    })
  }

  close = () => {
    const { closeModal } = this.props;
    this.formRef.current && this.formRef.current.resetFields();
    closeModal();
  }

  render() {
    const { modalVisible } = this.props;
    const burningStatus = getDictOptionsByCode(this.context.dicData, 'burningStatus')
    const footer = (
      <div>
        <Button onClick={this.close} type="primary">
          关闭
        </Button>
      </div>
    )

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { 
          span: 6,
          offset: 4, 
        },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { 
          span: 14,
        },
        md: { span: 16 },
      },
    };

    return (
      <Modal
        title="自燃车辆详情"
        footer={footer}
        visible={modalVisible}
        width={700}
        onCancel={this.close}
      >
        <Form
          ref={this.formRef}
        >
          <Row gutter={24}>
            <Col span={20}>
              <FormItem
                {...formItemLayout}
                colon={false}
                name="brandName"
                label="品牌"
              >
                <Select disabled={true} options={[]} placeholder="" />
              </FormItem>
            </Col>
            <Col span={20}>
              <FormItem
                {...formItemLayout}
                colon={false}
                name="seriesName"
                label="车系"
              >
                <Select disabled={true} options={[]} placeholder="" />
              </FormItem>
            </Col>
            <Col span={20}>
              <FormItem
                {...formItemLayout}
                colon={false}
                name="typeName"
                label="车型"
              >
                <Select disabled={true} options={[]} placeholder="" />
              </FormItem>
            </Col>
            <Col span={20}>
              <FormItem
                {...formItemLayout}
                colon={false}
                name="vin"
                label="VIN码"
              >
                <Input disabled={true} placeholder="" />
              </FormItem>
            </Col>
            <Col span={20}>
              <FormItem
                {...formItemLayout}
                colon={false}
                name="happenDate"
                label="自燃日期"
              >
                <Input disabled={true} placeholder="" />
              </FormItem>
            </Col>
            <Col span={20}>
              <FormItem
                {...formItemLayout}
                colon={false}
                name="address"
                label="自燃地点"
              >
                <Input disabled={true} placeholder="" />
              </FormItem>
            </Col>
            <Col span={20}>
              <FormItem
                {...formItemLayout}
                colon={false}
                name="status"
                label="自燃时车辆状态"
              >
                <Select disabled={true} options={burningStatus || []} placeholder="" />
              </FormItem>
            </Col>
            <Col span={20}>
              <FormItem
                {...formItemLayout}
                colon={false}
                name="accruedMiles"
                label="累计里程"
              >
                <Input disabled={true} placeholder="" />
              </FormItem>
            </Col>
            <Col span={20}>
              <FormItem
                {...formItemLayout}
                colon={false}
                name="vehicleAge"
                label="车龄"
              >
                <Input disabled={true} placeholder="" />
              </FormItem>
            </Col>
            <Col span={20}>
              <FormItem
                {...formItemLayout}
                colon={false}
                name="remark"
                label="备注记录"
              >
                <TextArea disabled={true} rows={4} placeholder="" />
              </FormItem>
            </Col>
          </Row>
        </Form>
      </Modal>
    )
  }
}
export default connect(mapStateToProps)(DetailModal);
